import React from 'react';
import { useBreakpoint } from '../../hooks/useBreakpoint';

export interface ContainerProps {
  /**
   * 容器类型
   * - fluid: 流体宽度（100%）
   * - fixed: 固定最大宽度
   * - responsive: 响应式（根据断点调整）
   */
  type?: 'fluid' | 'fixed' | 'responsive';

  /**
   * 自定义最大宽度
   */
  maxWidth?: string | number;

  /**
   * 水平内边距
   */
  padding?: string | number;

  /**
   * 是否居中
   */
  centered?: boolean;

  /**
   * 自定义className
   */
  className?: string;

  /**
   * 子元素
   */
  children: React.ReactNode;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
}

/**
 * Container 组件
 * 响应式容器，支持流体/固定宽度
 *
 * @example
 * <Container type="responsive">
 *   <Content />
 * </Container>
 */
export const Container: React.FC<ContainerProps> = ({
  type = 'responsive',
  maxWidth,
  padding,
  centered = true,
  className = '',
  children,
  style = {}
}) => {
  const breakpoint = useBreakpoint();

  // 计算容器样式
  const getContainerStyle = (): React.CSSProperties => {
    const baseStyle: React.CSSProperties = {
      width: '100%',
      margin: centered ? '0 auto' : undefined,
      ...style
    };

    // 流体容器
    if (type === 'fluid') {
      return {
        ...baseStyle,
        maxWidth: maxWidth || '100%',
        padding: padding || '0 16px'
      };
    }

    // 固定容器
    if (type === 'fixed') {
      return {
        ...baseStyle,
        maxWidth: maxWidth || '1280px',
        padding: padding || '0 24px'
      };
    }

    // 响应式容器（根据断点）
    let responsiveMaxWidth: string;
    let responsivePadding: string;

    switch (breakpoint) {
      case 'mobile':
        responsiveMaxWidth = '100%';
        responsivePadding = '0 16px';
        break;
      case 'tablet':
        responsiveMaxWidth = '768px';
        responsivePadding = '0 24px';
        break;
      case 'desktop':
        responsiveMaxWidth = maxWidth?.toString() || '1280px';
        responsivePadding = padding?.toString() || '0 32px';
        break;
      default:
        responsiveMaxWidth = '1280px';
        responsivePadding = '0 24px';
    }

    return {
      ...baseStyle,
      maxWidth: responsiveMaxWidth,
      padding: responsivePadding
    };
  };

  return (
    <div className={className} style={getContainerStyle()}>
      {children}
    </div>
  );
};

Container.displayName = 'Container';
